export const addTimeType = (editor) => {
  // 给component type 定义 model，定义属性、方法和事件
  const timerModel = editor.DomComponents.addType("timer", {
    model: {
      defaults: {
        tagName: "div",
        timer: 60, // seconds
        script() {
          // 该脚本将在最终的 HTML 中打印
          const timerEl = this;
          let timer = timerEl.getAttribute("timer")
            ? parseInt(timerEl.getAttribute("timer"), 10)
            : 60;
          const interval = setInterval(() => {
            timerEl.innerHTML = timer;
            timer--;
            if (timer < 0) {
              clearInterval(interval);
              timerEl.innerHTML = "时间到!";
            }
          }, 1000);
        },
        // 在面板中显示计时器值
        badgeLabel() {
          return this.getAttributes().timer;
        },
      },
    },
  });

  // view用于定义在canvas里展现的UI
  const timerView = editor.DomComponents.getType("default").view.extend({
    events: {
      // 监听点击事件并更新定时器值
      click() {
        const model = this.model;
        const timer = model.getAttributes().timer;
        const newTimer = prompt("Enter the new timer value", timer);
        if (newTimer) {
          model.addAttributes({ timer: newTimer });
          model.trigger("change:script");
        }
      },
    },
  });

  editor.DomComponents.addType("timer", {
    model: timerModel,
    view: timerView,
  });

  editor.BlockManager.add("timer", {
    label: "计时器",
    category:'Basic',
    content: { type: "timer" },
  });
};
